<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
  </head>
  <body>
    <h2>这是我的vuejs版本购物车</h2>
    <div id="box">
      <template v-if="goods.length">
        <table border="1" cellspacing="0">
          <tr>
            <td>编号</td>
            <td>商品名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
          </tr>
          <tr v-for="(it,i) in goods">
            <td>{{it.id}}</td>
            <td>{{it.name}}</td>
            <td>￥{{it.price}}</td>
            <td>
              <button>-</button>{{it.selectCount}}<button
                v-on:click="add(i)"
                v-bind:disabled="goods[i].selectCount>=goods[i].saleMax"
              >
                +
              </button>
            </td>
            <td>￥{{it.xj}}</td>
          </tr>
        </table>
        <h3>您的商品总价为：{{total}},支付按钮</h3>
      </template>
      <template v-else>
        <div>亲，您的购物车为空，请快去商场首页选购商品吧。。。。</div>
      </template>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: "#box",
        methods: {
          add: function (x) {
            if (this.goods[x].selectCount < this.goods[x].saleMax) {
              this.goods[x].selectCount++;
              this.goods[x].xj=this.goods[x].xj+this.goods[x].price;
              this.total=this.total+this.goods[x].price;
            } 
          },
        },
        data: {
          goods: [
            {
              id: "0001",
              name: "苹果12",
              price: 6780,
              saleMax: 30,
              selectCount: 0,
              xj: 0,
            },
            {
              id: "0002",
              name: "华为mate40",
              price: 4780,
              saleMax: 30,
              selectCount: 0,
              xj: 0,
            },
            {
              id: "0003",
              name: "苹果数据线",
              price: 80,
              saleMax: 30,
              selectCount: 0,
              xj: 0,
            },
            {
              id: "0004",
              name: "ipad",
              price: 5780,
              saleMax: 30,
              selectCount: 0,
              xj: 0,
            },
          ],
          total: 0
        },
      });
    </script>
  </body>
</html>
